<template>
  <div id="userLoginView">
    <a-space style="margin-bottom: 32px" size="medium">
      <img
        src="../assets/logo.png"
        style="width: 32px"
        class="logo"
        alt="logo"
      />
      <span style="font-family: 'consolas', serif; font-size: 20px">
        Online Chat
      </span>
    </a-space>
    <a-form
      style="max-width: 360px; margin: 0 auto"
      label-align="left"
      auto-label-width
      :model="form"
      @submit-success="handleSubmit"
    >
      <a-form-item hide-label>
        <span style="font-size: 18px">用户登录</span>
      </a-form-item>
      <a-form-item
        field="username"
        :rules="[{ required: true, message: '账户不能为空' }]"
        hide-asterisk
        hide-label
      >
        <a-input v-model="form.username" placeholder="请输入账号" allow-clear>
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        field="password"
        :rules="[{ required: true, message: '密码不能为空' }]"
        hide-asterisk
        hide-label
      >
        <a-input-password
          v-model="form.password"
          placeholder="请输入密码"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item hide-label>
        <a-col style="width: 100%">
          <a-alert type="error" style="margin-bottom: 20px" v-show="showAlert">
            {{ errorMessage }}
          </a-alert>
          <a-button type="primary" html-type="submit" long>登录</a-button>
        </a-col>
      </a-form-item>
      <a-form-item hide-label>
        <a-row style="width: 100%">
          <a-col :span="12" style="display: flex; justify-content: flex-start">
            <a-link
              style="font-size: small"
              href="/user/password/reset"
              :hoverable="false"
            >
              忘记密码？
            </a-link>
          </a-col>
          <a-col :span="12" style="display: flex; justify-content: flex-end">
            <a-link
              style="font-size: small"
              href="/register"
              :hoverable="false"
            >
              没有账号？立即注册
            </a-link>
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { UserLoginRequest } from "@/models/UserLoginRequest";
import axios from "axios";

/**
 * 表单信息
 */
const form = reactive({
  username: "",
  password: "",
} as UserLoginRequest);

const router = useRouter();
const store = useStore();

const showAlert = ref(false);
const errorMessage = ref("登录失败");

const handleSubmit = async () => {
  const res = await axios({
    method: "post",
    url: "http://localhost:8081/user/login",
    data: form,
  });
  if (res.data.code === 0) {
    await store.dispatch("user/getLoginUser");
    await router.push({
      path: "/",
      replace: true,
    });
  } else {
    errorMessage.value = "登录失败，" + res.data.message;
    showAlert.value = true;
  }
};
</script>

<style scoped>
#userLoginView {
  width: 352px;
  margin-top: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--color-neutral-4);
  border-radius: 10px;
  box-shadow: 4px 4px 8px var(--color-neutral-4);
  padding: 24px 32px 32px;
}
</style>
